Cloudinaryを使って動画に字幕をつけてみた
画像、動画といったデジタルメディア管理、変換サービスのCloudinaryを使って動画に字幕をつける機会がありました。
本エントリではその手順を紹介します。
動画に字幕をつけるメリット
Facebookの動画の85％は音声音無しで再生され、Chrome ブラウザは音声が無効化されていない動画を自動再生できない方向に向いつつある中、動画コンテンツの情報伝達量を落とさないたまま、音声を補完する手段として、字幕(テロップ)は非常に有効です。
字幕の付け方
動画に字幕をつけるには、以下の2スッテプが必要です。
- 字幕用テキストを用意
- 動画に字幕をかぶせる
文字起こし方法
音声を人力で文字起こしすると、かなりの時間・手間がかかります。
Cloudinary のアドオン機能を使うと、 Google Cloud Speech-to-Text API とシームレスに連携し、動画を簡単に文字起こしできます。
アドオン機能を使わずにシステマティックに文字起こししたい場合、対応言語が限定されるものの、Amazon Transcribe を使う手もあるでしょう。
文字起こしデータフォーマット
動画向け文字起こしデータは、業界標準の
形式のどちらかで用意します。
参考までに SRT は以下のようなデータ形式をしています。
1 00:00:00,498 --> 00:00:02,827 - Here's what I love most about food and diet. 2 00:00:02,827 --> 00:00:06,383 We all eat several times a day, and we're totally in charge 3 00:00:06,383 --> 00:00:09,427 of what goes on our plate and what stays off.
開始、終了期間と、対応する文字列をシーケンスで指定するだけのシンプルなフォーマットです。
動画に字幕をつける
以下の流れで作業します。
- Cloudinary に動画をアップロード
- Cloudinary に字幕データをアップロード
- 動画を字幕付きで再生
- 字幕をオーバーレイで表示する
- 字幕を別トラックで表示する
1. Cloudinary に動画をアップロード
Cloudinary に動画をアップロードするだけです。
対応フォーマットなどの詳細は、次の記事を参照ください。
2. Cloudinary に字幕データをアップロード
SRT または VTT 形式の字幕データを Cloudinary にアップロードします。
API 経由でアップロードする場合は RAW 形式でアップロードします。
URL例 https://res.cloudinary.com/CLOUD-NAME/raw/upload/test.vtt
RAW 形式でアップロードしたオブジェクトは、 URL のパスに raw が含まれます。
比較のために、写真(image)/動画(video)/ロー(raw)それぞれの URL 形式例を記載します。
- https://res.cloudinary.com/CLOUD-NAME/image/upload/XXX/filename
- https://res.cloudinary.com/CLOUD-NAME/video/upload/XXX/filename
- https://res.cloudinary.com/CLOUD-NAME/raw/upload/XXX/filename
3. 動画を字幕付きで再生
字幕の表示形式は
- 字幕をオーバーレイで表示する
- 字幕を別トラックで表示する
の2通りがあります。
それぞれ試します。
動画だけを表示
比較のために、動画だけを紹介する video タグを記載します。
<video controls> <source src="https://res.cloudinary.com/CLOUD-NAME/video/upload/video.webm" type="video/webm"/> <source src="https://res.cloudinary.com/CLOUD-NAME/video/upload/video.mp4" type="video/mp4"/> </video>
このタグに字幕用のタグを追加していきます。
字幕をオーバーレイで表示する
動画に字幕をオーバーレイで表示する場合、動画用 URL に字幕用パスを追加するだけです。
URL 例 https://res.cloudinary.com/CLOUD-NAME/video/upload/字幕用パス/video.webm
字幕用パスには、アップロードした字幕のファイル名を l_subtitles:ファイル名 形式で指定します。
<video controls> <source src="https://res.cloudinary.com/CLOUD-NAME/video/upload/l_subtitles:test.srt/video.webm" type="video/webm"/> <source src="https://res.cloudinary.com/CLOUD-NAME/video/upload/l_subtitles:test.srt/video.mp4" type="video/mp4"/> </video>
字幕のスタイルを指定することもできます。
URL 例 https://res.cloudinary.com/CLOUD-NAME/video/upload/l_subtitles:arial_70:test.srt,co_rgb:ffff00,b_black/video.webm
- arial_70 は Arial フォントのサイズ(70pt)
- co_rgb:ffff00 は フォントの色(ffff00 = イエロー系)
- b_black : フォントの背景色の色(back)
を表します。
字幕を別トラックで表示する
動画に対して、多言語の字幕をつけたい時があるかもしれません。 そのような場合は、こちらの方式が向いています。
<video controls> <source src="https://res.cloudinary.com/CLOUD-NAME/video/upload/video.webm" type="video/webm"/> <source src="https://res.cloudinary.com/CLOUD-NAME/video/upload/video.mp4" type="video/mp4"/> <track label="English" kind="subtitles" srclang="en" src="https://res.cloudinary.com/CLOUD-NAME/raw/upload/test-en.vtt" default> <track label="Japanese" kind="subtitles" srclang="ja" src="https://res.cloudinary.com/CLOUD-NAME/raw/upload/test-ja.vtt"> </video>
言語ごとに用意したトランスクリプトを track タグで指定します。
track タグの属性に何を指定すればよいかは雰囲気で伝わると思います。詳細は次のドキュメントを参照ください。
track - HTML: Hypertext Markup Language | MDN
パラメーターのデバッグ
動画変換用のパラメーターをいじっていると、400 ステータスのエラーが発生することがあるかもしれません。
そのような場合は、 x-cld-error レスポンスヘッダーを確認してください。
このフィールドには、次のように、エラー原因が記載されています。
x-cld-error: Unknown or invalid layer subtitles test.srt of type upload
最後に
イメージ最適化、配信、およびデジタルアセットマネージメントの SaaS であるCloudinaryを使い、動画に字幕をつける方法についてまとめてみました。
ポイントは以下です。
- 動画とは別に字幕データを別途アップロードする必要がある
- 字幕の表示方式は、オーバーレイと別トラックの2通りがある
動画に字幕をつける機能の詳細は、以下のページを参考にしていただければと思います。
- Video Transformations | Cloudinary
- Auto Generate Subtitles Based on Video Transcript
- Google AI Video Transcription Add-on | Cloudinary
お知らせ
3月14日(木)にCloudinary の社員をゲストに迎えて「AKIBA.AWS #12 Cloudinaryで画像や動画配信を最適化しよう」を開催します。 Cloudinary の導入やデジタル・アセット管理を検討されておられる方は、是非、お申し込み下さい。
【3/14（木） 東京】AKIBA.AWS #12 Cloudinaryで画像や動画配信を最適化しよう〜デイリーポータルZの検証事例も〜を開催します
